@file:OptIn(ExperimentalMaterialApi::class)

package com.example.accompanist.ui.example

import android.util.Log
import android.widget.Toast
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AddAPhoto
import androidx.compose.material.icons.filled.InsertPhoto
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.accompanist.R
import com.example.accompanist.TAG
import com.example.accompanist.ui.theme.*
import com.fanketly.accompanist.global_popup.GlobalBottomLayoutViewModel
import com.fanketly.accompanist.global_popup.GlobalBottomSheetLayout
import com.fanketly.accompanist.picker.DatePickerDialog

@Preview(showBackground = true)
@Composable
fun PopupPreview() {

    val viewModel = viewModel<GlobalBottomLayoutViewModel>()
    ComposeTheme {
        Column {

            val sheetState =
                ModalBottomSheetState(ModalBottomSheetValue.Hidden, confirmStateChange = {
                    Log.i(TAG, "PopupPreview:$it ")
                    false
                })
            GlobalBottomSheetLayout(sheetState = sheetState, globalViewModel = viewModel) {
                Button(onClick = { viewModel.showSheet() }) {
                    Text(text = "Content")

                }
            }
        }
    }
    viewModel.addSheetContent {
        ChooseOrTakePhotoSheet(onTakeClick = {
            testAddButton(viewModel, 1)
        }) {
            viewModel.closeSheet()
        }
    }
}

/**
 *测试叠加底部弹出框
 **/
private fun testAddButton(viewModel: GlobalBottomLayoutViewModel, index: Int) {
    viewModel.addSheetContent {
        Button(modifier = Modifier.offset(x = (index * 50).dp), onClick = {
            when (index) {
                6 -> {
                    viewModel.removeBeforeSheetContent()
                }
                3 -> {
                    viewModel.removeSheetContent(0)
                }
                2 -> {
                    viewModel.addSheetContent {
                        Surface(Modifier.size(500.dp), color = Purple200) {
                            Column {
                                Button(onClick = { viewModel.removeBeforeSheetContent() }) {
                                    Text(text = "removeBeforeSheetContent")
                                }
                                Button(onClick = {
                                    testAddButton(
                                        viewModel = viewModel,
                                        index = index + 1
                                    )
                                }) {
                                    Text(text = "testAddButton")
                                }
                                Button(onClick = { viewModel.removeSheetContent(0) }) {
                                    Text(text = "removeSheetContent")
                                }
                            }
//                            testAddButton(viewModel = viewModel, index = index + 1)
                        }
                    }
                }
                else -> {
                    testAddButton(viewModel = viewModel, index = index + 1)
                }
            }
        }) {
            Text(text = "ssssss$index")
        }
    }
}

/**
 *常用的拍照和选择文件组件，用于测试
 **/
@Composable
fun ChooseOrTakePhotoSheet(
    textColor: Color = Color.Unspecified, onTakeClick: () -> Unit, onChooseClick: () -> Unit
) {
    Surface(
        shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
        modifier = Modifier
            .navigationBarsPadding()
            .height(150.dp)
    ) {
        Column(
            Modifier.padding(SmallDimen)
        ) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(70.dp)
                    .clickable {
                        onTakeClick.invoke()
                    }, verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(
                    imageVector = Icons.Filled.AddAPhoto,
                    contentDescription = stringResource(id = R.string.description_take_photo),
                    modifier = Modifier.size(40.dp),
                    tint = ImageColor
                )
                Text(
                    text = stringResource(id = R.string.description_take_photo),
                    color = textColor,
                    modifier = Modifier.padding(start = MediumDimen)
                )
            }
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(70.dp)
                    .clickable {
                        onChooseClick.invoke()
                    }, verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(
                    imageVector = Icons.Filled.InsertPhoto,
                    contentDescription = stringResource(id = R.string.description_choose_photo),
                    modifier = Modifier.size(40.dp),
                    tint = ImageColor
                )
                Text(
                    text = stringResource(id = R.string.description_choose_photo),
                    color = textColor,
                    modifier = Modifier.padding(start = MediumDimen)
                )
            }
        }
    }
}

@Composable
fun DateDialogSample(openDialog: Boolean, onDismiss: () -> Unit) {
    val context = LocalContext.current
    if (openDialog) DatePickerDialog(false, onDateSelected = { year, month, dayOfMonth ->
        Toast.makeText(context, "$year-$month-$dayOfMonth", Toast.LENGTH_SHORT).show()
    }, onDismissRequest = onDismiss)
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ExposedDropdownMenuSample() {
    val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
    var expanded by remember { mutableStateOf(false) }
    var selectedOptionText by remember { mutableStateOf(options[0]) }
    // We want to react on tap/press on TextField to show menu
    ExposedDropdownMenuBox(expanded = expanded, onExpandedChange = {
        expanded = !expanded
    }) {
        TextField(
            readOnly = true,
            value = selectedOptionText,
            onValueChange = { },
            label = { Text("Label") },
            trailingIcon = {
                ExposedDropdownMenuDefaults.TrailingIcon(
                    expanded = expanded
                )
            },
            colors = ExposedDropdownMenuDefaults.textFieldColors()
        )
        ExposedDropdownMenu(expanded = expanded, onDismissRequest = {
            expanded = false
        }) {
            options.forEach { selectionOption ->
                DropdownMenuItem(onClick = {
                    selectedOptionText = selectionOption
                    expanded = false
                }) {
                    Text(text = selectionOption)
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun EditableExposedDropdownMenuSample() {
    val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
    var expanded by remember { mutableStateOf(false) }
    var selectedOptionText by remember { mutableStateOf("") }
    ExposedDropdownMenuBox(expanded = expanded, onExpandedChange = {
        expanded = !expanded
    }) {
        TextField(
            value = selectedOptionText,
            onValueChange = { selectedOptionText = it },
            label = { Text("Label") },
            trailingIcon = {
                ExposedDropdownMenuDefaults.TrailingIcon(
                    expanded = expanded
                )
            },
            colors = ExposedDropdownMenuDefaults.textFieldColors()
        )
        // filter options based on text field value
        val filteringOptions = options.filter { it.contains(selectedOptionText, ignoreCase = true) }
        if (filteringOptions.isNotEmpty()) {
            ExposedDropdownMenu(expanded = expanded, onDismissRequest = {
                expanded = false
            }) {
                filteringOptions.forEach { selectionOption ->
                    DropdownMenuItem(onClick = {
                        selectedOptionText = selectionOption
                        expanded = false
                    }) {
                        Text(text = selectionOption)
                    }
                }
            }
        }
    }
}